<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>sweet</title>
		<style type="text/css">
			.shadowroot_son {
				color: #f00;
			}
		</style>
	</head>

	<body>
		<div class="shadowhost">Hello, world!</div>
		
		<script>
			// 影子宿主（shadow host）
			var shadowHost = document.querySelector('.shadowhost');
			// 创建影子根（shadow root）
			var shadowRoot = shadowHost.createShadowRoot();
			// 影子根作为影子树的第一个节点，其他的节点比如p节点都是它的子节点。
			shadowRoot.innerHTML = '<p class="shadowroot_son">夏天夏天悄悄过去留下小秘密！</p>';
		</script>
	</body>
</html>